<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>POLO360练习</title>
		<!-- 引入 reset.css 用来清除浏览器的默认样式 -->
		<link rel="stylesheet" type="text/css" href="css/reset.css">
		<!-- 引入 page-index -->
		<link rel="stylesheet" type="text/css" href="css/page-index.css">
	</head>
	<body>
		<!--
			id class 和文件的命名规范
				- 命名时尽量使用英文，如果不会可以使用拼音
					但是不要英文和拼音混用
				- 命名格式
					- 驼峰命名法
						- 首字母小写，每个单词的开头字母大写
							例子：aaaBbbCcc helloWorld
					- 也可以所有的字母都小写，单词之间使用 _ 或者 - 链接
		-->
		<!-- 创建头部 div header -->
		<!-- header 开始 -->
		<div class="header w">
			<!-- 创建一个导航条 -->
			<ul class="nav">
				<li>
					<a href="#">HOME</a>
					<p>Back to home</p>
				</li>
				<li>
					<a href="#">PRODUCTS</a>
					<p>What we have for you</p>
				</li>
				<li>
					<a href="#">SERVICES</a>
					<p>Things we do</p>
				</li>
				<li>
					<a href="#">BLOG</a>
					<p>Follow our updates</p>
				</li>
				<li>
					<a href="#">CONTACT</a>
					<p>Ways to reach us</p>
				</li>
			</ul>
			<!-- 在 div 中设置 logo -->
			<div class="logo">
				<a href="#" title="一个很好的网站">
					<img src="img/logo.png" alt="网站的 logo">
				</a>
			</div>
		</div>
		<!-- header 结束 -->
		<!-- banner 开始 -->
		<div class="banner w">
			<!-- 图片的阴影设置在 banner 的背景图片上 显示在底部 居中 设置高度 -->
			<img src="img/banner/banner01.png" alt="这是一个banner">
			
			<!-- 创建一个 div 用于放置导航按钮 -->
			<div class="pointerDiv">
				<a href="#"></a>
				<a class="active" href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
		</div>
		<!-- banner 结束 -->
		<!-- content 开始 -->
		<div class="content w clearfix">
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			<!-- 放置内容的 3 个 div -->
			<div class="pl">
				<h2>Perfect Logic</h2>
				<p class="p1">All you want your website to do.</p>
				<!-- 创建图片的 div -->
				<div class="imgDiv">
					<img src="img/pic/pic1.jpg" alt="小男孩">
				</div>
				<p class="p2">
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
					totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
				</p>
				<a href="#" class="lm">Learn More</a>
			</div>
			<div class="cs">
				<h2>Complete Solution</h2>
				<p class="p1">A tool anything and everything you can think</p>
				<!-- 创建图片的 div -->
				<div class="imgDiv">
					<img src="img/pic/pic2.jpg" alt="小女孩">
				</div>
				<p class="p2">
					Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
					sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
				</p>
				<a href="#" class="lm">Learn More</a>
			</div>
			<div class="uc">
				<h2>Uber Culture</h2>
				<p class="p1">Fresh. Modern and ready for future</p>
				<!-- 创建图片的 div -->
				<div class="imgDiv">
					<img src="img/pic/pic3.jpg" alt="水果">
				</div>
				<p class="p2">
					Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
					sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
				</p>
				<a href="#" class="lm">Learn More</a>
			</div>
		</div>
		<!-- content 结束 -->
		<!-- contact 开始 -->
		<div class="contact w clearfix">
			<!-- 创建三栏 div -->
			<div class="sc">
				<!-- 一个标题 -->
				<h2>Social Connection</h2>
				<!-- 设置段落 -->
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<!-- 设置小图标的 div -->
				<div class="icon">
					<a href="#"><img src="img/icon/rss.png" alt="rss" /></a>
					<a href="#"><img src="img/icon/fb.png" alt="rss" /></a>
					<a href="#"><img src="img/icon/in.png" alt="rss" /></a>
					<a href="#"><img src="img/icon/yt.png" alt="rss" /></a>
					<a href="#"><img src="img/icon/tw.png" alt="rss" /></a>
				</div>
				<!-- 一个标题 -->
				<h2 class="nl">Newsletter</h2>
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<!-- 创建一个表单 -->
				<form action="#">
					<input class="txt" type="text" placeholder="your email address" />
					<button class="btn">Subscribe</button>
				</form>
			</div>
			<!-- 联系栏中间 -->
			<div class="co">
				<!-- 创建一个标题 -->
				<h2>Contact</h2>
				<!-- 创建一个表单 -->
				<form action="#">
					<!--
						在文本框和文本域中可以使用 placeholder 来指定提示文字（水印）
						这个属性在 IE8 及以下的浏览器中不支持，如果要兼容 IE8 需要使用 JS
					-->
					<input class="txt" type="text" placeholder="your name" />
					<input class="txt" type="text" placeholder="your email address" />
					<textarea class="tarea" placeholder="message"></textarea>
					<button class="btn">Send it</button>
				</form>
			</div>
			<div class="nu">
				<!-- 一个标题 -->
				<h2 class="nl">News Updates</h2>
				<p>
					<img src="img/1.jpg" alt="图片1">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				</p>
				<p>
					<img src="img/2.jpg" alt="图片1">
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
				</p>
				<p class="no-margin">
					<img src="img/3.jpg" alt="图片1">
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
				</p>
				<button class="btn">Visit our Blog</button>
			</div>
		</div>
		<!-- contact 结束 -->
		<!-- footer 开始 -->
		<div class="footer">
			<div class="w">
				<p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
				<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
				<p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p>
				<p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p>
			</div>
		</div>
		<!-- footer 结束 -->
	</body>
</html>
